<template>
    <div class="navigation-cards">
        <div class="cards-container" v-show="ifShow('基础信息')">
            <van-cell-group :border="false">
                <van-cell @click="navigateTo('basic-info')" class="nav-card">
                    <template #title>
                        <div class="card-content">
                            <div class="card-icon basic-info-icon">
                                <van-icon name="notes" size="35" />
                            </div>
                            <div class="card-text-container">
                                <div class="card-title">填写基础信息</div>
                                <div class="card-desc">表单录入企业的基础信息</div>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <div class="cards-container" v-show="ifShow('组织架构')">
            <van-cell-group :border="false">

                <van-cell @click="navigateTo('org-chart')" class="nav-card">
                    <template #title>
                        <div class="card-content">
                            <div class="card-icon org-chart-icon">
                                <van-icon name="cluster" size="35" />
                            </div>
                            <div class="card-text-container">
                                <div class="card-title">填写组织架构</div>
                                <div class="card-desc">录入部门架构信息信息，生成一个可编辑的表单</div>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <div class="cards-container" v-show="ifShow('成员信息')">
            <van-cell-group :border="false">


                <van-cell @click="navigateTo('member-info')" class="nav-card">
                    <template #title>
                        <div class="card-content">
                            <div class="card-icon member-info-icon">
                                <van-icon name="friends" size="35" />
                            </div>
                            <div class="card-text-container">
                                <div class="card-title">填写成员信息</div>
                                <div class="card-desc">表格形式录入成员信息(部门、姓名、岗位、层级和绩效)</div>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <!-- 新增查看企业信息卡片 -->
        <div class="cards-container">
            <van-cell-group :border="false" v-show="ifShow('查看企业信息')">
                <van-cell @click="navigateTo('company-info')" class="nav-card">
                    <template #title>
                        <div class="card-content">
                            <div class="card-icon company-info-icon">
                                <van-icon name="newspaper" size="35" />
                            </div>
                            <div class="card-text-container">
                                <div class="card-title">查看企业信息</div>
                                <div class="card-desc">浏览已填写的企业完整信息</div>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <!-- 查看测评二维码 -->
        <div class="cards-container" v-show="ifShow('查看信息')">
            <van-cell-group :border="false">
                <van-cell @click="navigateTo('qrcode-info')" class="nav-card">
                    <template #title>
                        <div class="card-content">
                            <div class="card-icon qrcode-icon">
                                <van-icon name="photo" size="35" />
                            </div>
                            <div class="card-text-container">
                                <div class="card-title">查看测评二维码</div>
                                <div class="card-desc">查看测评二维码</div>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <!-- 查看PDF文件 -->
        <div class="cards-container" v-show="ifShow('查看信息')">
            <van-cell-group :border="false">
                <van-cell @click="navigateTo('report-info')" class="nav-card">
                    <template #title>
                        <div class="card-content">
                            <div class="card-icon report-icon">
                                <van-icon name="newspaper" size="35" />
                            </div>
                            <div class="card-text-container">
                                <div class="card-title">查看报告</div>
                                <div class="card-desc">查看和下载报告</div>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <!-- 查看PDF文件 -->
        <div class="cards-container" v-show="ifShow('管理管理员')">
            <van-cell-group :border="false">
                <van-cell @click="navigateTo('manager-info')" class="nav-card">
                    <template #title>
                        <div class="card-content">
                            <div class="card-icon manager-icon">
                                <van-icon name="manager" size="35" />
                            </div>
                            <div class="card-text-container">
                                <div class="card-title">管理员成员管理</div>
                                <div class="card-desc">新增/修改/删除管理员</div>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'


const router = useRouter()

const navigateTo = (path: string) => {
    switch (path) {
        case 'basic-info':
            // 跳转到基础信息页面
            router.push('/basicInfo')
            break
        case 'org-chart':
            // 跳转到组织架构页面
            router.push('/formPage')
            break
        case 'member-info':
            // 跳转到成员信息页面
            router.push('/memberInfo')
            break
        case 'company-info':
            // 跳转到企业信息页面
            router.push('/companyInfo')
            break
        case 'report-info':
            // 跳转到报告页面
            router.push('/reportPage')
            break
        case 'qrcode-info':
            // 跳转到二维码页面
            router.push('/qrcodePage')
            break
        case 'manager-info':
            // 跳转到管理员页面
            router.push('/managerPage')
            break
        default:
            break
    }
}
//获取身份判断显示页面
const ifShow = (name: string) => {
    const user = JSON.parse(localStorage.getItem('user') || '{}')
    const role = user.role
    const userShowList = ['基础信息', '组织架构', '成员信息', '查看信息']
    const managerShowList = ['查看企业信息']
    if (role === '普通用户') {
        return userShowList.includes(name)
    } else if (role === '管理员') {
        return managerShowList.includes(name)
    } else {
        return true
    }
}

</script>

<style scoped>
.navigation-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background-color: #f5f5f5;
    min-height: calc(100vh - 20px);
    /* 根据实际顶部和底部间距调整 */
    width: 95vw;
    /* 允许内部滚动 */
    overflow-y: auto;
    margin-bottom: 6vh;
}

.cards-container {
    width: 100%;
    margin-top: 2vh;
    background: white;
    border-radius: 75px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-card {
    margin: 0;
}

.nav-card:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.card-content {
    display: flex;
    align-items: center;
    padding: 15px 0;
}

.card-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.basic-info-icon {
    background-color: #e1f5fe;
    color: #039be5;
}

.org-chart-icon {
    background-color: #e8f5e9;
    color: #4caf50;
}

.member-info-icon {
    background-color: #fff3e0;
    color: #ff9800;
}

/* 在现有样式基础上添加 */
.company-info-icon {
    background-color: #fce4ec;
    color: #e91e63;
}

.report-icon {
    background-color: #e3f2fd;
    /* 浅蓝色背景 */
    color: #1976d2;
    /* 深蓝色图标 */
}

.qrcode-icon {
    background-color: #e0f7fa;
    /* 青色背景 */
    color: #0097a7;
    /* 深青色图标 */
}

.manager-icon {
    background-color: #f3e5f5;
    /* 淡紫色背景 */
    color: #9c27b0;
    /* 深紫色图标 */
}

.card-text-container {
    flex: 1;
}

.card-title {
    font-size: 20px;
    color: #333;
    font-weight: 500;
    margin-bottom: 8px;
}

.card-desc {
    font-size: 16px;
    color: #999;
}

:deep(.van-cell) {
    padding: 0 20px;
}

:deep(.van-cell__title) {
    flex: 1;
}

:deep(.van-cell__value) {
    color: #999;
    font-size: 12px;
}

:deep(.van-cell:after) {
    display: none;
}
</style>